<template>
    <div>
        <el-drawer title="" :visible.sync="drawer" :direction="direction" :before-close="handleClose" custom-class="drawer-info">
            <div class="info-item">
                <h5 class="from-title">基本信息</h5>
                <div class="form-item">
                    <label class="form-item-label">用户名:</label>
                    <div class="form-item-content">{{ objInfo.userName }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">密码:</label>
                    <div class="form-item-content">{{ objInfo.password }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">手机号:</label>
                    <div class="form-item-content">{{ objInfo.phone }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">昵称:</label>
                    <div class="form-item-content">{{ objInfo.nickName }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">会员卡号:</label>
                    <div class="form-item-content">{{ objInfo.cardNumber }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">微信openid:</label>
                    <div class="form-item-content">{{ objInfo.openid }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">微信unionid:</label>
                    <div class="form-item-content">{{ objInfo.unionid }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">头像:</label>
                    <div class="form-item-content" ><img :src="objInfo.avatar" /></div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">性别:</label>
                    <div class="form-item-content">{{ objInfo.genderName }}</div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">生日:</label>
                    <div class="form-item-content">{{ objInfo.birthday }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">省:</label>
                    <div class="form-item-content">{{ objInfo.province }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">省名称:</label>
                    <div class="form-item-content">{{ objInfo.provinceName }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">市:</label>
                    <div class="form-item-content">{{ objInfo.city }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">市名称:</label>
                    <div class="form-item-content">{{ objInfo.cityName }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">区:</label>
                    <div class="form-item-content">{{ objInfo.area }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">区名称:</label>
                    <div class="form-item-content">{{ objInfo.areaName }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">会员来源:</label>
                    <div class="form-item-content">{{ objInfo.sourceName }}</div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">邀请人:</label>
                    <div class="form-item-content">{{ objInfo.invitation }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">会员等级id:</label>
                    <div class="form-item-content">{{ objInfo.levelIdName }}</div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">会员状态(正常、禁用、黑名单):</label>
                    <div class="form-item-content">{{ objInfo.statusName }}</div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">审核状态（是否实名）:</label>
                    <div class="form-item-content">{{ objInfo.auditStatusName }}</div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">认证类型（实名类型）:</label>
                    <div class="form-item-content">{{ objInfo.realTypeName }}</div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">备注:</label>
                    <div class="form-item-content">{{ objInfo.remark }}
                    </div>
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script>
    import { memberInfo } from "@/api/member/member.js";
    import { dictList,enumList,urlList, } from "@/api/public.api.js";
    export default {
        data() {
            return {
                drawer: true,
                direction: "rtl",
                objInfo: {},
                sexList:[],
                sourceList:[],
                MemberStatusList:[],
                YesNoList:[],
                MemberRealTypeList:[],
                levelIdList:[],
            }
        },
        created() {
        },
        methods: {
          queryDictList(){
              this.sexList = [];
              dictList("sex").then((resp) => {
                if (resp.code == 0) {
                  this.sexList = resp.data;
                }
              });
              this.sourceList = [];
              dictList("source").then((resp) => {
                if (resp.code == 0) {
                  this.sourceList = resp.data;
                }
              });
          },
          queryEnumList(){
              this.MemberStatusList = [];
              enumList("MemberStatus","").then((resp) => {
                if (resp.code == 0) {
                  this.MemberStatusList = resp.data;
                }
              });
              this.YesNoList = [];
              enumList("YesNo","").then((resp) => {
                if (resp.code == 0) {
                  this.YesNoList = resp.data;
                }
              });
              this.MemberRealTypeList = [];
              enumList("MemberRealType","").then((resp) => {
                if (resp.code == 0) {
                  this.MemberRealTypeList = resp.data;
                }
              });
          },
          queryUrlList(){
              this.levelIdList = [];
              urlList("/member/memberVipLeve/list").then((resp) => {
                if (resp.code == 0) {
                  if (resp.data) {
                    resp.data.forEach((item) => {
                      this.levelIdList.push({ code: item.id, name: item.name });
                    });
                  }
                }
              });
          },
            init(id) {
                this.queryDictList();
                this.queryEnumList();
                this.queryUrlList();
                if (id) {
                   memberInfo(id).then(res => {
                        this.objInfo = res.data
                              let genderObj = this.sexList.find((item) => {
                                return item.code == this.objInfo.gender;
                              });
                              this.objInfo.genderName = genderObj ? genderObj.name : "";
                              let sourceObj = this.sourceList.find((item) => {
                                return item.code == this.objInfo.source;
                              });
                              this.objInfo.sourceName = sourceObj ? sourceObj.name : "";
                              let levelIdObj = this.levelIdList.find((item) => {
                                return item.code == this.objInfo.levelId;
                              });
                              this.objInfo.levelIdName = levelIdObj ? levelIdObj.name : "";
                              let statusObj = this.MemberStatusList.find((item) => {
                                return item.code == this.objInfo.status;
                              });
                              this.objInfo.statusName = statusObj ? statusObj.name : "";
                              let auditStatusObj = this.YesNoList.find((item) => {
                                return item.code == this.objInfo.auditStatus;
                              });
                              this.objInfo.auditStatusName = auditStatusObj ? auditStatusObj.name : "";
                              let realTypeObj = this.MemberRealTypeList.find((item) => {
                                return item.code == this.objInfo.realType;
                              });
                              this.objInfo.realTypeName = realTypeObj ? realTypeObj.name : "";
                   })

                }
                this.drawer = true
            },
            // 关闭抽屉
            handleClose(done) {
                done()
            },
        },
    }
</script>
<style scoped>
    .from-title {
        margin-bottom: 20px;
        padding: 0 20px 20px 20px;
        font-size: 16px;
        color: #17233d;
        border-bottom: 1px solid #eee;
    }
    .info-item {
        margin-bottom: 40px;
    }

    .form-item {
        margin-bottom: 20px;
        font-size: 14px;
    }
    .form-item-label {
        text-align: right;
        float: left;
        width: 25%;
    }
    .form-item-content {
        margin-left: 30%;
        width: 70%;
    }
</style>
